<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- <span>word</span> hello {{arr}} world
    <ul>
      <li>{{name}}</li>
    </ul> -->
    <div id="app" a="1" style="color: red; background: green">{{innerArr}}</div>
    <script src="dist/vue.js"></script>
    <script>
      let vm = new Vue({
        el: "#app",
        data() {
          return {
            name: "zf",
            arr: [1, 2, 3],
            innerArr: [[11, 22, 33]],
            a: {
              a: 1,
            },
          };
        }
        // render(h) {
        //   return h("div", { class: "xxx" }, "hello");
        // },
      });


      // console.log(vm);
      // 数据变化需要影响视图 数据和页面渲染关联起来
      // setTimeout(() => {
      //   // vm.name = "hello";
      //   // vm.name = "hello1";
      //   // vm.name = "hello2";
      //   // vm.name = "hello3";
      //   // vm.name = "hello4";
      //   // console.log(vm.$el.innerText);
      //   vm.$nextTick(() => {
      //     console.log(vm.$el.innerText);
      //   });
      //   // vm.innerArr[0].push(44);
      //   // vm._update(vm._render())
      // }, 2000);
    </script>
  </body>
</html>
